<template>
	<div class="ui-pane">
		<ui-header headertit="提示框"></ui-header>
		<div class="ui-content" @click.self="contClick">
			<arealine linetit="点击页面试试"></arealine>
			<div class="area-line flex-between">
				<div class="area_left">
					<div class="line_tit" @click="titClick">
						我系渣渣辉陪你贪玩蓝月
					</div>
					<div class="line_cont" @click="msgClick">
						我系渣渣辉陪你贪玩蓝月我系渣渣辉陪你贪玩蓝月我系渣渣辉陪你贪玩蓝月我系渣渣辉陪你贪玩蓝月
					</div>
					<div class="flex-star line_num">
						<div class="flex-star">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-liulan"></use>
							</svg>
							<span>666</span>
						</div>
						<div class="flex-star" @click="likesClick">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-zan"></use>
							</svg>
							<span>688</span>
						</div>
					</div>
				</div>
				<div class="line_rihgt bg-aaa flex-center" @click="imgClick"><span>图片</span></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			imgClick() {
				this.$tips({
					msg: "点击图片",
					flag: true
				});
			},
			titClick(){
				this.$tips({
					msg: "点击标题",
					flag: true
				});
			},
			msgClick(){
				this.$tips({
					msg: "点击内容",
					flag: true
				});
			},
			likesClick(){
				this.$tips({
					msg: "点赞",
					flag: true
				});
			},
			contClick(){
				this.$tips({
					msg: "页面被点击",
					flag: true
				});
			}
			
		}
	}
</script>

<style scoped="scoped">
	.area-line {
		background: #ccc;
		margin: 0 .25rem;
		color: #666;
		padding: .2rem .25rem;
	}

	.line_tit {
		color: #333;
		font-size: .3rem;
		font-weight: bold;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.area-line .line_rihgt {
		height: 2rem;
		width: 2rem;
	}

	.area_left {
		height: 2rem;
		padding: .1rem 0;
		width: calc(100% - 2.4rem);
	}

	.line_cont {
		color: #666;
		font-size: .24rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		margin: .1rem 0 .2rem 0;
		-webkit-box-orient: vertical;
	}

	.line_num .flex-star {
		margin-right: .15rem;
		font-size: .24rem;
	}

	.line_num .flex-star svg {
		width: .32rem;
		height: .32rem;
		margin-right: .05rem;
	}
</style>
